<template>
	<div class="layout-pd">
		<el-card shadow="hover" header="表单表格验证">
			<el-form ref="tableRulesRef" :model="state.tableData" size="default">
				<el-table ref="tableRef" :data="state.tableData.data" border class="module-table-uncollected" max-height="200">
					<el-table-column
						v-for="(item, index) in state.tableData.header"
						:key="index"
						show-overflow-tooltip
						:prop="item.prop"
						:width="item.width"
						:label="item.label"
					>
						<template v-slot:header>
							<span v-if="item.isRequired" class="color-danger">*</span>
							<span class="pl5">{{ item.label }}</span>
							<el-tooltip v-if="item.isTooltip" effect="dark" content="这是tooltip" placement="top">
								<i class="iconfont icon-quanxian" />
							</el-tooltip>
						</template>
						<template v-slot="scope">
							<el-form-item
								:prop="`data.${scope.$index}.${item.prop}`"
								:rules="[{ required: item.isRequired, message: '不能为空', trigger: `${item.type}` == 'input' ? 'blur' : 'change' }]"
							>
								<el-select v-if="item.type === 'select'" v-model="scope.row[item.prop]" placeholder="请选择">
									<el-option v-for="sel in state.tableData.option" :key="sel.value" :label="sel.label" :value="sel.value" />
								</el-select>
								<el-date-picker
									v-else-if="item.type === 'date'"
									v-model="scope.row[item.prop]"
									type="date"
									placeholder="选择日期"
									style="width: 100%"
								/>
								<el-input v-else-if="item.type === 'input'" v-model="scope.row[item.prop]" placeholder="请输入内容" />
								<el-input v-else-if="item.type === 'dialog'" v-model="scope.row[item.prop]" readonly placeholder="请输入内容">
									<template v-slot:suffix>
										<i class="iconfont icon-shouye_dongtaihui" />
									</template>
								</el-input>
							</el-form-item>
						</template>
					</el-table-column>
				</el-table>
			</el-form>
			<el-row class="flex mt15">
				<div class="flex-margin">
					<el-button size="default" type="success" @click="onValidate(tableRulesRef)">表格验证</el-button>
					<el-button size="default" type="primary" @click="onAddRow">新增一行</el-button>
				</div>
			</el-row>
		</el-card>
	</div>
</template>

<script setup lang="ts" name="pagesTableRules">
import { reactive, ref, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import type { FormInstance } from 'element-plus';

// 定义变量内容
const tableRulesRef = ref<FormInstance>();
const tableRef = ref();
const state = reactive<TableRulesState>({
	tableData: {
		data: [],
		header: [
			{ prop: 'a1', width: '', label: '一级分类', isRequired: true, type: 'select' },
			{ prop: 'a2', width: '', label: '二级分类', isRequired: true, type: 'select' },
			{ prop: 'a3', width: '', label: '三级分类', isRequired: true, type: 'select' },
			{ prop: 'a4', width: '', label: '四级分类', isRequired: true, type: 'date' },
			{ prop: 'a5', width: '', label: '五级分类', isRequired: true, type: 'input' },
			{ prop: 'a6', width: '', label: '六级分类', isTooltip: true, type: 'dialog' },
			{ prop: 'a7', width: '', label: '演示级分类', type: 'input' },
			{ prop: 'a8', width: '', label: '颜色是分类', type: 'input' },
		],
		option: [
			{ value: '选项1', label: '黄金糕' },
			{ value: '选项2', label: '双皮奶' },
			{ value: '选项3', label: '蚵仔煎' },
		],
	},
});

// 表格验证
const onValidate = (formEl: FormInstance | undefined) => {
	if (state.tableData.data.length <= 0) return ElMessage.warning('请先点击增加一行');
	if (!formEl) return;
	formEl.validate((valid) => {
		if (!valid) return ElMessage.warning('表格项必填未填');
		ElMessage.success('全部验证通过');
	});
};
// 新增一行
const onAddRow = () => {
	state.tableData.data.push({
		a1: '',
		a2: '',
		a3: '',
		a4: '',
		a5: '',
		a6: '',
		a7: '',
		a8: '',
	});
	tableRef.value.doLayout();
	nextTick(() => {
		tableRef.value.setScrollTop(1000000);
	});
};
</script>
